<template>
    <myMoveBox class="content-root">
        <div class="header b" @click="show_ClickEvent">
            <slot name="icon">

            </slot>
        </div>
        <slot name="content" v-if="isShow">

        </slot>
    </myMoveBox>
</template>

<script setup>
import { onMounted } from 'vue';
import myMoveBox from './index.vue'

const props = defineProps({
    icon: String,
    default: Boolean,
});

onMounted(() => {
    if (props.default) {
        setTimeout(() => {
            show_ClickEvent();
        }, 300)
    }
})

const emits = defineEmits(["show", "hide"]);

const isShow = ref(false);

const show_ClickEvent = () => {
    isShow.value = !isShow.value;
    if (isShow.value) {
        emits('show');
    } else {
        emits('hide');
    }
}


</script>

<style scoped lang="scss">
.header {
    width: 50px;
    height: 50px;
    cursor: pointer;
    user-select: none;
    border-radius: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
